<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        display: flex;
        gap: 20px;
        padding: 20px;
        height: 100vh;
        margin: 0;
        font-family: system-ui, -apple-system, sans-serif;
      }

      .controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 400px;
      }

      textarea {
        width: 100%;
        height: 300px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: monospace;
      }

      .options-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 4px;
      }

      .option:has(.option-toggle-box:not(:checked)) .option-select {
        opacity: 0.5;
        pointer-events: none;
      }

      .option {
        display: flex;
        gap: 16px;
        align-items: center;
      }

      .input-label,
      .checkbox-label,
      .select-label {
        display: flex;
        gap: 4px;
        align-items: center;
      }

      .checkbox-label,
      .select-label {
        cursor: pointer;
      }

      .text-input,
      .number-input {
        width: 3rem;
      }

      button {
        padding: 8px 16px;
        background: #0066cc;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      button:hover {
        background: #0052a3;
      }

      #output {
        flex: 1;
        overflow: auto;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 16px;
      }

      #output svg {
        min-width: 100%;
        max-height: 90vh;
      }

      #output pre {
        font-family: monospace;
        white-space: pre;
        overflow-x: auto;
        background: #f5f5f5;
        padding: 16px;
        border-radius: 4px;
      }
    </style>
  </head>

  <body>
    <div class="controls">
      <textarea id="input">
server: {shape: rectangle}
database: {shape: cylinder}
user: {shape: person}

user -> server: "HTTP request"
server -> database: "SQL query"
database -> server: "result"
server -> user: "response"</textarea
      >
      <div class="options-group">
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="layout-toggle" class="option-toggle-box" />
              <span>Layout</span>
            </label>
          </div>
          <div class="option-select">
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" name="layout-select" value="dagre" checked />
                Dagre
              </label>
              <label class="radio-label">
                <input type="radio" name="layout-select" value="elk" />
                ELK
              </label>
            </div>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="sketch-toggle" class="option-toggle-box" />
              <span>Sketch Mode</span>
            </label>
          </div>
          <div class="option-select">
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" name="sketch-select" value="true" checked />
                Enabled
              </label>
              <label class="radio-label">
                <input type="radio" name="sketch-select" value="false" />
                Disabled
              </label>
            </div>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="ascii-toggle" class="option-toggle-box" />
              <span>ASCII Mode</span>
            </label>
          </div>
          <div class="option-select">
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" name="ascii-select" value="true" checked />
                Enabled
              </label>
              <label class="radio-label">
                <input type="radio" name="ascii-select" value="false" />
                Disabled
              </label>
            </div>
            <select id="ascii-mode-select">
              <option selected value="extended">Extended (Unicode)</option>
              <option value="standard">Standard (ASCII)</option>
            </select>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="center-toggle" class="option-toggle-box" />
              <span>Centered</span>
            </label>
          </div>
          <div class="option-select">
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" name="center-select" value="true" checked />
                Enabled
              </label>
              <label class="radio-label">
                <input type="radio" name="center-select" value="false" />
                Disabled
              </label>
            </div>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="appendix-toggle" class="option-toggle-box" />
              <span>Force Appendix</span>
            </label>
          </div>
          <div class="option-select">
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" name="appendix-select" value="true" checked />
                Enabled
              </label>
              <label class="radio-label">
                <input type="radio" name="appendix-select" value="false" />
                Disabled
              </label>
            </div>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="theme-toggle" class="option-toggle-box" />
              <span>Theme</span>
            </label>
          </div>
          <div class="option-select">
            <select id="theme-select">
              <option selected value="0">Default</option>
              <option value="1">Neutral grey</option>
              <option value="3">Flagship Terrastruct</option>
              <option value="4">Cool classics</option>
              <option value="5">Mixed berry blue</option>
              <option value="6">Grape soda</option>
              <option value="7">Aubergine</option>
              <option value="8">Colorblind clear</option>
              <option value="100">Vanilla nitro cola</option>
              <option value="101">Orange creamsicle</option>
              <option value="102">Shirley temple</option>
              <option value="103">Earth tones</option>
              <option value="104">Everglade green</option>
              <option value="105">Buttered toast</option>
              <option value="200">Dark mauve</option>
              <option value="300">Terminal</option>
              <option value="301">Terminal grayscale</option>
            </select>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="dark-theme-toggle" class="option-toggle-box" />
              <span>Dark Theme</span>
            </label>
          </div>
          <div class="option-select">
            <select id="dark-theme-select">
              <option selected value="0">Default</option>
              <option value="1">Neutral grey</option>
              <option value="3">Flagship Terrastruct</option>
              <option value="4">Cool classics</option>
              <option value="5">Mixed berry blue</option>
              <option value="6">Grape soda</option>
              <option value="7">Aubergine</option>
              <option value="8">Colorblind clear</option>
              <option value="100">Vanilla nitro cola</option>
              <option value="101">Orange creamsicle</option>
              <option value="102">Shirley temple</option>
              <option value="103">Earth tones</option>
              <option value="104">Everglade green</option>
              <option value="105">Buttered toast</option>
              <option value="200">Dark mauve</option>
              <option value="300">Terminal</option>
              <option value="301">Terminal grayscale</option>
            </select>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="pad-toggle" class="option-toggle-box" />
              <span>Padding</span>
            </label>
          </div>
          <div class="option-select">
            <label class="input-label">
              <input
                type="number"
                id="pad-input"
                value="20"
                step="10"
                class="number-input"
              />
            </label>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="scale-toggle" class="option-toggle-box" />
              <span>Scale</span>
            </label>
          </div>
          <div class="option-select">
            <label class="input-label">
              <input
                type="number"
                id="scale-input"
                value="1"
                step="0.1"
                min="0"
                class="number-input"
              />
            </label>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input type="checkbox" id="target-toggle" class="option-toggle-box" />
              <span>Target</span>
            </label>
          </div>
          <div class="option-select">
            <label class="input-label">
              <input type="text" id="target-input" class="text-input" />
            </label>
          </div>
        </div>
        <div class="option">
          <div class="option-toggle">
            <label class="checkbox-label">
              <input
                type="checkbox"
                id="animate-interval-toggle"
                class="option-toggle-box"
              />
              <span>Animate Interval</span>
            </label>
          </div>
          <div class="option-select">
            <label class="input-label">
              <input
                type="number"
                id="animate-interval-input"
                value="0"
                step="100"
                min="0"
                class="number-input"
              />
            </label>
          </div>
        </div>
        <div class="option">
          <div class="option-select">
            <label class="input-label">
              <span>Salt</span>
              <input type="text" id="salt-input" class="text-input" />
            </label>
          </div>
        </div>
        <div class="option">
          <div class="option-select">
            <label class="input-label">
              <span>Regular Font</span>
              <input
                type="file"
                accept=".ttf"
                id="font-regular-input"
                class="file-input"
              />
            </label>
          </div>
        </div>
        <div class="option">
          <div class="option-select">
            <label class="input-label">
              <span>Italic Font</span>
              <input
                type="file"
                accept=".ttf"
                id="font-italic-input"
                class="file-input"
              />
            </label>
          </div>
        </div>
        <div class="option">
          <div class="option-select">
            <label class="input-label">
              <span>Bold Font</span>
              <input type="file" accept=".ttf" id="font-bold-input" class="file-input" />
            </label>
          </div>
        </div>
        <div class="option">
          <div class="option-select">
            <label class="input-label">
              <span>Semibold Font</span>
              <input
                type="file"
                accept=".ttf"
                id="font-semibold-input"
                class="file-input"
              />
            </label>
          </div>
        </div>
      </div>
      <button onclick="compile()">Compile</button>
    </div>
    <div id="output"></div>
    <script type="module">
      import { D2 } from "../dist/browser/index.js";
      const d2 = new D2();
      const loadFont = async (file) => {
        if (file != undefined) {
          const font = await file.arrayBuffer();
          return Array.from(new Uint8Array(font));
        }
      };
      window.compile = async () => {
        const input = document.getElementById("input").value;
        const layout = document.getElementById("layout-toggle").checked
          ? document.querySelector('input[name="layout-select"]:checked').value
          : null;
        const ascii = document.getElementById("ascii-toggle").checked
          ? document.querySelector('input[name="ascii-select"]:checked').value == "true"
          : null;
        const asciiModeSelector = document.getElementById("ascii-mode-select");
        const asciiMode = ascii
          ? asciiModeSelector.options[asciiModeSelector.selectedIndex].value
          : null;
        const sketch = document.getElementById("sketch-toggle").checked
          ? document.querySelector('input[name="sketch-select"]:checked').value == "true"
          : null;
        const center = document.getElementById("center-toggle").checked
          ? document.querySelector('input[name="center-select"]:checked').value == "true"
          : null;
        const forceAppendix = document.getElementById("appendix-toggle").checked
          ? document.querySelector('input[name="appendix-select"]:checked').value ==
            "true"
          : null;
        const themeSelector = document.getElementById("theme-select");
        const themeId = document.getElementById("theme-toggle").checked
          ? Number(themeSelector.options[themeSelector.selectedIndex].value)
          : null;
        const darkThemeSelector = document.getElementById("dark-theme-select");
        const darkThemeId = document.getElementById("dark-theme-toggle").checked
          ? Number(darkThemeSelector.options[darkThemeSelector.selectedIndex].value)
          : null;
        const pad = document.getElementById("pad-toggle").checked
          ? Number(document.getElementById("pad-input").value)
          : null;
        const scale = document.getElementById("scale-toggle").checked
          ? Number(document.getElementById("scale-input").value)
          : null;
        const target = document.getElementById("target-toggle").checked
          ? String(document.getElementById("target-input").value)
          : null;
        const animateInterval = document.getElementById("animate-interval-toggle").checked
          ? Number(document.getElementById("animate-interval-input").value)
          : null;
        const salt = String(document.getElementById("salt-input").value);
        const fontRegular = await loadFont(
          document.getElementById("font-regular-input").files[0]
        );
        const fontItalic = await loadFont(
          document.getElementById("font-italic-input").files[0]
        );
        const fontBold = await loadFont(
          document.getElementById("font-bold-input").files[0]
        );
        const fontSemibold = await loadFont(
          document.getElementById("font-semibold-input").files[0]
        );
        try {
          const result = await d2.compile(input, {
            layout,
            sketch: ascii ? false : sketch, // Disable sketch when ASCII is enabled
            themeId,
            darkThemeId,
            scale,
            pad,
            center,
            forceAppendix,
            target,
            animateInterval,
            salt,
            fontRegular,
            fontItalic,
            fontSemibold,
            fontBold,
            noXmlTag: true,
            ascii: ascii,
            asciiMode: asciiMode,
          });
          const output = await d2.render(result.diagram, {
            ...result.renderOptions,
            ascii: ascii,
            asciiMode: asciiMode,
          });

          if (ascii) {
            document.getElementById("output").innerHTML = `<pre>${output}</pre>`;
          } else {
            document.getElementById("output").innerHTML = output;
          }
        } catch (err) {
          console.error(err);
          document.getElementById("output").textContent = err.message;
        }
      };

      // Make ASCII and Sketch modes mutually exclusive
      document.getElementById("ascii-toggle").addEventListener("change", function () {
        if (this.checked) {
          document.getElementById("sketch-toggle").checked = false;
        }
      });

      document.getElementById("sketch-toggle").addEventListener("change", function () {
        if (this.checked) {
          document.getElementById("ascii-toggle").checked = false;
        }
      });

      compile();
    </script>
  </body>
</html>
